<template>
  <view
    class="w-select"
    id="wSelect"
    :style="{
      '--select-wrap-width': width,
      '--select-wrap-height': height,
      '--select-bg-color': bgColor
    }"
  >
    <view :class="isShow ? 'select-wrap-active' : ''" class="select-wrap" @click="changeShow">
      <input type="text"
        @input="inputChange"
        @blur="blurChange"
        :value="inputData"
        placeholder="请搜索会员姓名或者手机号"
      >
      <scroll-view
        scroll-y
        v-show="optionsShow"
        :class="[
          isShow
            ? showPosition === 'bottom'
              ? 'animation-bottom-in'
              : 'animation-top-in'
            : showPosition === 'bottom'
              ? 'animation-bottom-out'
              : 'animation-top-out',
          showPosition === 'bottom'
            ? 'position-bottom'
            : 'position-top'
        ]"
        class="select-options"
      >
        <view
          @click.stop="handleClickItem(item)"
          :class="modelValue === item[keyName]
                ? 'item-active'
                : ''
          "
          v-for="item in filterList"
          :key="item[keyName]"
          class="select-option-item"
        >
          {{ item[valueName] }}
        </view>

        <view class="options-no-data" v-if="filterList.length < 1">
          无匹配数据~
        </view>
      </scroll-view>
    </view>
    <view v-if="isShow" @click="closeContentSelect" class="contentMask" />
  </view>
</template>

<script setup>
import { ref, watch, computed, onMounted, defineProps, defineEmits } from 'vue';
import { shopApi } from "@/api";
const props = defineProps({
  width: {
    type: String,
    default: '200px'
  },
  height: {
    type: String,
    default: '30px'
  },
  bgColor: {
    type: String,
    default: '#fff'
  },
  filterable: {
    type: Boolean,
    default: false
  },
  showClose: {
    type: Boolean,
    default: false
  },
  list: {
    type: Array,
    default: () => []
  },
  modelValue: {
    type: [Array, String, Number],
    default: ''
  },
  placeholder: {
    type: String,
    default: '请选择'
  },
  valueName: {
    type: String,
    default: 'label'
  },
  keyName: {
    type: String,
    default: 'value'
  }
});

const emit = defineEmits(['update:modelValue', 'change', 'inputchanges']);

const inputData = ref('');
const multiSelectList = ref([]);
const isShow = ref(false);
const optionsShow = ref(false);
const windowHeight = ref(null);
const curHeight = ref(null);
const distanceTop = ref(null);
const showPosition = ref('bottom');
const filterList = ref([]);
const refreshUrl = '';

watch(() => props.list, (news) => {
  filterList.value = news;
  const findItem = news.find(item => item[props.keyName] === props.modelValue);
  if (findItem) {
    inputData.value = findItem[props.valueName];
  }
}, { immediate: true, deep: true });

watch(() => props.modelValue, (newValue) => {
  const findItem = props.list.find(it => it[props.keyName] === newValue);
    if (findItem) {
      inputData.value = findItem[props.valueName];
    }
});


const bottomDistance = computed(() => {
  return windowHeight.value - distanceTop.value - curHeight.value;
});

onMounted(() => {
  const res = uni.getSystemInfoSync();
  windowHeight.value = res.windowHeight;
  uni.createSelectorQuery()
    .in(this)
    .select('#wSelect')
    .boundingClientRect(data => {
      distanceTop.value = data.top;
      curHeight.value = data.height;
    })
    .exec();

  getUserInfoList();
});

const getUserInfoList = () => {
  shopApi.SHOPGETMEMBERLIST({
      currentPage: 1,
      pageSize: 9999
    })
    .then((res) => {
      if (res.code == 200) {
        console.log(res.data, 'res.data');
      }
    });
};

const changeShow = () => {
  isShow.value = !isShow.value;
  if (!isShow.value) {
    filterList.value = props.list;
    setTimeout(() => {
      optionsShow.value = false;
    }, 200);
  } else {
    showPosition.value = bottomDistance.value < windowHeight.value / 3 ? 'top' : 'bottom';
    optionsShow.value = isShow.value;
  }
};

const closeContentSelect = () => {
  isShow.value = false;
  setTimeout(() => {
    optionsShow.value = false;
  }, 200);
};

const setValue = (value = '') => {
  emit('update:modelValue', value);
};

const inputChange = (e) => {
  const value = e.detail.value;
  emit('inputchanges', value);
};

const blurChange = (e) => {
  const value = e.detail.value;
  emit('inputchanges', value);
};

const refreshValue = () => {
  setValue('');
  inputData.value = '';
  emit('change', '');
  filterList.value = props.list;
};

const handleClickItem = (e) => {
  setValue(e[props.keyName]);
    inputData.value = e[props.valueName];
    emit('change', e);
    // changeShow();
    optionsShow.value = false;
};

</script>
  <style lang="scss" scoped>
  .w-select {
    width: 200px;
    --select-wrap-height: 30px;
    --select-border-radius: 4px;
    --select-options-max-height: 150px;
    --select-option-item-font-size: 14px;
    --select-input-font-size: 14px;
    --no-data-default-color: #999999;
    --select-options-box-shadow: 0px 0px 12px rgb(0 0 0 / 12%);
    --select-bg-color: #ffffff;
    .select-wrap {
      position: relative;
      display: flex;
      justify-content: space-between;
      align-items: center;
      width: var(--select-wrap-width);
      height: var(--select-wrap-height);
      border: var(--select-border);
      border-radius: var(--select-border-radius);
      background-color: var(--select-bg-color);
      transition: all 0.2s;
      input {
        padding: 0 2px;
        width: 100%;
        min-width: 0;
        height: 100%;
        font-size: var(--select-input-font-size);
        flex: 1;
      }
      .select-content {
        display: flex;
        align-items: center;
        font-size: var(--select-option-item-font-size);
        .select-content-item {
          margin-left: 5px;
          padding: 2px 6px;
          border-radius: var(--select-border-radius);
          color: #aa93b1;
          background-color: #f4f4f5;
        }
        .select-content-item-default {
          margin-left: 5px;
          color: var(--no-data-default-color);
        }
      }
      .close-icon {
        position: absolute;
        top: 50%;
        right: 7px;
        z-index: 1000;
        width: 15px;
        height: 15px;
        transform: translateY(-50%);
        image {
          width: 100%;
          height: 100%;
        }
      }
      .position-bottom {
        top: calc(var(--select-wrap-height) + 10px);
      }
      .position-top {
        bottom: calc(var(--select-wrap-height) + 10px);
      }
      .select-options {
        position: absolute;
        right: 0;
        left: 0;
        z-index: 999;
        overflow: scroll;
        padding: 10px;
        max-height: var(--select-options-max-height);
        border-radius: var(--select-border-radius);
        background-color: var(--select-bg-color);
        box-shadow: var(--select-options-box-shadow);
        .select-option-item {
          margin-bottom: 5px;
          padding: 5px;
          font-size: var(--select-option-item-font-size);
          transition: background-color 0.2s;
        }
        .item-active {
          font-weight: 700;
          color: rgba(214, 142, 68, 1);
          background-color: rgb(255, 234, 214);
        }
        .options-no-data {
          font-size: var(--select-option-item-font-size);
          text-align: center;
          color: var(--no-data-default-color);
        }
      }
      .w-select-arrow {
        display: inline-block;
        margin: 3px 10px 0;
        width: 8px;
        height: 8px;
        border-top: 1px solid transparent;
        border-right: 1px solid transparent;
        border-bottom: 1px solid #999999;
        border-left: 1px solid #999999;
        transition: all 0.3s;
        transform: translateY(-50%) rotate(-45deg);
      }
      .w-select-arrow-up {
        transform: rotate(-225deg);
      }
    }
    .select-wrap-active {
      // border: var(--select-active-border);
    }
    .animation-bottom-in {
      animation-name: bottom-in;
      animation-duration: 0.4s;
      animation-timing-function: ease-out;
      animation-fill-mode: both;
    }
    .animation-bottom-out {
      animation-name: bottom-out;
      animation-duration: 0.2s;
      animation-timing-function: ease-out;
      animation-fill-mode: both;
    }
    .animation-top-in {
      animation-name: top-in;
      animation-duration: 0.4s;
      animation-timing-function: ease-out;
      animation-fill-mode: both;
    }
    .animation-top-out {
      animation-name: top-out;
      animation-duration: 0.2s;
      animation-timing-function: ease-out;
      animation-fill-mode: both;
    }

    @keyframes bottom-in {
      0% {
        opacity: 0;
        transform: translateY(-15%);
      }
      100% {
        opacity: 1;
        transform: translateY(0);
      }
    }

    @keyframes bottom-out {
      0% {
        opacity: 1;
        transform: translateY(0);
      }
      100% {
        opacity: 0;
        transform: translateY(-20%);
      }
    }

    @keyframes top-in {
      0% {
        opacity: 0;
        transform: translateY(15%);
      }
      100% {
        opacity: 1;
        transform: translateY(0);
      }
    }

    @keyframes top-out {
      0% {
        opacity: 1;
        transform: translateY(0);
      }
      100% {
        opacity: 0;
        transform: translateY(20%);
      }
    }
    .contentMask {
      position: fixed;
      top: 0;
      right: 0;
      bottom: 0;
      left: 0;
      z-index: 998;
      width: 100%;
      height: 100%;
    }
  }
  </style>
